<template>
  <div class="container">
    <el-dialog
      title="未审核结算单列表"
      :visible.sync="dialog.centerDialogVisible"
      @open=""
      @close="confirm"
      center
      width="100%"
    >
      <el-table
        max-height="600"
        :data="tableData"
        tooltip-effect="dark"
        border
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
        class="hidden-xs-only"
        row-key="id"
        show-summary
        :summary-method="getSummaries"
      >
        <!-- <el-table-column
          type="selection"
          :reserve-selection="true"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="xuhao"
          label="序号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="serial_code"
          label="结算单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="应结金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="pay_amount"
          label="已结金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unliquidated"
          label="未结金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="statusDesc"
          label="财务结算状态"
          align="center"
        ></el-table-column>
        <el-table-column label="采购结算操作状态" width="160" align="center">
          <template slot-scope="scope">
            <el-switch
              :disabled="scope.row.gys_status == 1"
              v-model="scope.row.value"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="不结算"
              inactive-text="结算"
              @change="statusBtn(scope)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="normal_desc"
          label="入库单结算状态"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="typeMsg"
          label="类型"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="codes"
          label="入库单/返货单"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="supplier_name"
          label="供应商"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="orgarea_name"
          label="区域"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gys_time"
          label="供应商审核时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="contacts"
          label="名字"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class_code"
          label="品类编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="class_name"
          label="品类名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buyer"
          label="采购员"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="buyer_code"
          label="采购员编码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="one_class_name"
          label="一级分类"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_name"
          label="商品名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_num"
          label="商品数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qty"
          label="箱数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_price"
          label="商品价格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="rdc_name"
          v-if="acc_type != 1"
          label="配送中心"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="handcode"
          label="手工单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="last_pay_time"
          label="付款时间"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button
              class="btn"
              type="warning"
              size="mini"
              icon="el-icon-back"
              v-if="showSuppler"
              @click="rollback(scope)"
              >回退</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        border
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
        row-key="id"
        show-summary
        :summary-method="getSummarie"
        class="hidden-sm-and-up"
      >
        <el-table-column
          prop="serial_code"
          label="结算单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="应结金额"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="statusDesc"
          label="财务结算状态"
          align="center"
        ></el-table-column>
        <el-table-column label="采购结算操作状态" width="160" align="center">
          <template slot-scope="scope">
            <el-switch
              :disabled="scope.row.gys_status == 1"
              v-model="scope.row.value"
              active-color="#ff4949"
              inactive-color="#13ce66"
              active-text="不结算"
              inactive-text="结算"
              @change="statusBtn(scope)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="supplier_name"
          label="供应商"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="gys_time"
          label="供应商审核时间"
          align="center"
        ></el-table-column>

        <el-table-column
          prop="goods_name"
          label="商品名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_num"
          label="商品数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="qty"
          label="箱数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_price"
          label="商品价格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
        ></el-table-column>

        <el-table-column label="操作" align="center" width="150px">
          <template slot-scope="scope">
            <el-button
              class="btn"
              type="warning"
              size="mini"
              icon="el-icon-back"
              v-if="showSuppler"
              @click="rollback(scope)"
              >回退</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="备注"
        append-to-body
        :visible.sync="remark.centerDialogVisible"
        center
        width="500px"
        @close="closes"
      >
        <el-form
          :model="formData"
          ref="formData"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="备注：">
            <el-input
              type="textarea"
              v-model="formData.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="confirmType">确 定</el-button>
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="auditConfirm">确定审核</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  saveStatementStatus,
  platConfirm,
  supplierConfirm,
  supplierBackCongirm
} from "@/api/settlement/settlementList";
export default {
  props: {
    dialog: Object,
    tableData: Array,
    acc_type: Number,
    showSuppler: Boolean
  },
  data() {
    return {
      formData: {
        remark: ""
      },
      //   acc_type: "",
      //    showSuppler: false,
      remark: {
        id: "",
        sum: "",
        num: 0,
        centerDialogVisible: false
      }
    };
  },
  created() {},
  methods: {
    //审核确定
    auditConfirm() {
      let idArr = [];
      this.tableData.forEach(res => {
        idArr.push(res.id);
      });
      let ids = idArr.join(",");
      let data = {
        id: ids
      };
      if (this.acc_type == 0 || this.acc_type == 3 || this.acc_type == 8) {
        data.pt_status = 1;
        platConfirm(data).then(res => {
          if (res.code == 0) {
           
            this.$message({
              type: "success",
              message: res.msg
            });
             this.$emit("upData", "true");
            this.confirm();
          }
        });
      } else if (this.acc_type == 1) {
        data.gys_status = 1;
        supplierConfirm(data).then(res => {
          if (res.code == 0) {
            
            this.$message({
              type: "success",
              message: res.msg
            });
             this.$emit("upData", "true");
            this.confirm();
          }
        });
      }
    },
    //关闭
    confirm() {
      this.dialog.centerDialogVisible = false;
    },
    //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index != 2 && index != 3 && index != 4) {
            sums[index] = "";
          } else {
            sums[index] = sums[index].toFixed(4);
          }
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    //移动端合计
    getSummarie(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index != 1) {
            sums[index] = "";
          } else {
            sums[index] = sums[index].toFixed(4);
          }
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    //不结算状态操作
    statusBtn(scope) {
      if (scope.row.value) {
        this.remark.sum = 2;
      } else {
        this.remark.sum = 0;
      }
      this.remark.num = scope.$index;
      this.remark.id = scope.row.id;
      this.remark.centerDialogVisible = true;
    },
    //回退
    rollback(scope) {
      let data = {
        id: scope.row.id
      };
      this.$confirm("是否回退?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          supplierBackCongirm(data).then(res => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.msg || res.message
              });
              this.tableData.splice(scope.$index, 1);
              if (this.tableData.length == 0) {
                this.confirm();
                this.$emit("upData");
              }
            } else {
              this.$message({
                type: "error",
                message: res.msg || res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },

    //关闭备注弹窗
    closes() {
      this.tableData[this.remark.num].value = false;
      this.formData.remark = "";
      this.remark.centerDialogVisible = false;
    },
    //结算操作状态弹窗确定
    confirmType() {
      let data = {
        id: this.remark.id,
        cw_status: this.remark.sum,
        remark: this.formData.remark
      };
      saveStatementStatus(data)
        .then(res => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg || res.message
            });

            this.remark.centerDialogVisible = false;
            this.tableData.splice(this.remark.num, 1);
            if (this.tableData.length == 0) {
              this.confirm();
              this.$emit("upData");
            }
          } else {
            this.$message({
              type: "error",
              message: res.msg || res.message
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //选取
    handleSelectionChange(val) {
      this.price = 0;
      this.selectedData = val;
      this.selectedData.forEach(res => {
        this.price += parseFloat(res.amount);
      });
      this.price = this.price.toFixed(4);
    }
  }
};
</script>
<style scoped>
.pagination {
  text-align: right;
  padding: 10px;
}
</style>
